import { CustomerService } from 'src/app/shared/service/customerservice';
import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api';
import { FilterMetadata } from 'primeng/api';
import { Customer } from 'src/app/domain/customer';

@Component({
  selector: 'app-page01',
  templateUrl: './page01.component.html',
  styleUrls: ['./page01.component.scss'],
  // providers:[CustomerService]
})
export class Page01Component implements OnInit {
  datasource: Customer[];

  customers: Customer[];

  totalRecords: number;

  cols: any[];

  loading: boolean;
  rows = 25;

  frozenCols = [
    { field: 'index', header: 'Index' },
    { field: 'name', header: 'Name' },
  ];
  scrollableCols = [
    // { field: 'id', header: 'Id' },
    { field: 'date', header: 'Date' },
    { field: 'company', header: 'Company' },
    { field: 'status', header: 'Status' },
    { field: 'activity', header: 'Activity' },
  ];

  constructor(private customerService: CustomerService) {}

  ngOnInit(): void {
    this.customerService.getCustomersLarge().then((data) => {
      this.datasource = data;
      this.totalRecords = data.length;
    });

    this.loading = true;
  }

  loadCustomers(event: LazyLoadEvent) {
    this.loading = true;

    // in a real application, make a remote request to load data using state metadata from event
    // event.first = First row offset
    // event.rows = Number of rows per page
    // event.sortField = Field name to sort with
    // event.sortOrder = Sort order as number, 1 for asc and -1 for dec
    // filters: FilterMetadata object having field as key and filter value, filter matchMode as value

    // imitate db connection over a network
    setTimeout(() => {
      if (this.datasource) {
        this.customers = this.datasource
          .slice(event.first, event.first + event.rows)
          .map((item, index) => {
            item.index = event.first + index + 1;
            return item;
          });


        this.loading = false;
      }
    }, 1000);
  }
}
